import React, { useState } from 'react'
import classes from './LoginByAccount.module.css'

const LoginByAccount = (props: any) => {
  const [formData, setFormData] = useState({
    account: '',
    password: '',
  })

  const accountChangeHandler = (e: { target: { value: string } }) => {
    setFormData({
      ...formData,
      account: e.target.value,
    })
  }

  const passwordChangeHandler = (e: { target: { value: string } }) => {
    setFormData({
      ...formData,
      password: e.target.value,
    })
  }

  const formSubmitHandler = (e: { preventDefault: () => void }) => {
    e.preventDefault()

    const newLog = {
      account: formData.account,
      password: formData.password,
    }

    props.onLogin(newLog)

    setFormData({
      account: '',
      password: '',
    })
  }

  return (
    <div>
      <form onSubmit={formSubmitHandler}>
        <div className={classes.formItem}>
          <label htmlFor="account"></label>
          <input
            id="account"
            type="text"
            onChange={accountChangeHandler}
            value={formData.account}
            placeholder={'请输入账号'}
            className={classes.text}
          />
        </div>
        <div className={classes.formItem}>
          <label htmlFor="password"></label>
          <input
            id="password"
            type="text"
            onChange={passwordChangeHandler}
            value={formData.password}
            placeholder={'请输入登录密码'}
            className={classes.text}
          />
        </div>
        
        <div className={classes.formBtn}>
          <button
            className={classes.loginButton}
            style={{
              backgroundColor: props.color,
              borderColor: props.color,
            }}>
            登录
          </button>
        </div>
        <div className={classes.loginBlocks}>
          {props.resetAccountUrl ? (
            <a href={props.resetAccountUrl} className={classes.blockText1}>
              忘记账号名
            </a>
          ) : (
            <div />
          )}
          {props.resetPasswordUrl ? (
            <a href={props.resetPasswordUrl} className={classes.blockText2}>
              忘记密码
            </a>
          ) : (
            <div />
          )}
        </div>
      </form>
    </div>
  )
}

export default LoginByAccount
